<template>
    <div>
        <div :class="searchStatus?'search_con search_fixed':'search_con'" :id="fixed?'friendSearchfixed':''">
            <a @click="searchFriend" v-show="!searchStatus">
                <icon otherClass="searchIcon1" iconName="#icon-jiahaoyou"></icon>
            </a>
            <icon v-on:clickE="shareJump" v-show="!searchStatus" otherClass="searchIcon1" iconName="#icon-fenxiangyaoqingma"></icon>
            <span class="cancel right" v-show="searchStatus" @click="cancel">取消</span>
            <i class="iconfont icon-sou searchIcon"></i>
            <input type="text" class="search_ipt" v-model="searchCont" @keyup="searchBtn" placeholder="搜索" @click="searchSwitch">
        </div>
        <div v-show="fixed" style="height:3rem;"></div>
        <div class="friend_list" v-show="!searchStatus">
            <div class="initial_word">
                <!--A<br/><a>B</a><br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>J<br/>K<br/>L<br/>M<br/>N<br/>O<br/>P<br/>Q<br/>R<br/>S<br/>T<br/>W<br/>X<br/>Y<br/>Z<br/>-->
            </div>
            <ul>
                <li v-for="item in friendList" @click="friendDetail(item.friendId)">
                    <!-- <div class="friendImg">
                        <img :src="item.url">
                    </div>
                    <span>{{item.usrName}}</span> -->
                    <mt-cell-swipe
                      :right="[{ content:'删除', style: { background: 'red', color: '#fff' }, handler: ()=>pass( item.friendId) }]" >
                        <div class="friendImg">
                            <img :src="item.url">
                        </div>
                            <!--<span class="friend_span">{{item.usrName}}</span>-->
                        <span class="friend_span">{{item.friendNote}}
                            <i class="friend_span" v-show="!item.friendNote">{{item.usrName}}</i>
                        </span>
                    </mt-cell-swipe>
                </li>
            </ul>
        </div>

        <div class="friend_list search_friend" v-show="searchStatus">
            <!-- <p v-show="friendSearchList!=''">搜索结果</p> -->
            <p v-show="pStatus">搜索结果</p>
            <div class="no_friend" v-show="friendStatus">没有相关好友</div>
            <ul>
                <li v-for="searchItem in friendSearchList" @click="friendDetail(searchItem.friendId)">
                    <div class="friendImg">
                        <img :src="searchItem.url">
                    </div>
                    <!--<span>{{searchItem.usrName}}</span>-->
                    <span class="friend_span">{{searchItem.friendNote}}
                            <i class="friend_span" v-show="!searchItem.friendNote">{{searchItem.usrName}}</i>
                    </span>
                    <span class="friend_span friend_span_info" v-show="searchItem.friendNote">（券友名称:{{searchItem.usrName}}）</span>
                </li>

            </ul>
        </div>
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import { mapState } from 'vuex'
    import getData from '../../service/getData.js'
    import getData2 from '../../service/getData2.js'
    import { CellSwipe,MessageBox,Toast } from 'mint-ui'
    export default {
            data:function(){
                return{
                    friendList:[],
                    searchStatus:false,
                    pStatus:false,
                    friendStatus:false,
                    searchCont:'',
                    friendSearchList:[],
                    rightButtons:[],
                    fixed:false,
                }
            },
        beforeRouteLeave(to, from, next){
            window.removeEventListener('scroll', this.handleScroll);
            next()
        },
            created:function(){
                window.addEventListener('scroll', this.handleScroll);
                let me = this;
                getData.myFriends({method:"post"},me.userInfo.usrId).then(function(rep){
                    //console.log(rep);
                    if(rep.respCode == '00'){
                        me.friendList = rep.content.friends;
                    }
                });
                this.rightButtons = [
                    {
                      content: '删除',
                      style: { background: 'red', color: '#fff' },
                      handler: () => this.$messagebox({
                          title: '',
                          message: '确定删除该好友?',
                          showCancelButton: true
                        }).then(action => {
                            //console.log(action);
                            if(action=='confirm'){
                                console.log(me.searchStatus)
                            }else if(action=='cancel'){
                                console.log('取消')
                            }
                        })
                    }
                ];

            },
            computed:{
                ...mapState({
                        userInfo:state => state.user.userInfo
                })
            },
            methods:{
                handleScroll() {
                    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                    if (scrollTop>=80) {
                        this.fixed=true;
                    } else {
                        this.fixed=false;
                    }

                },
                friendDetail:function(friendId){
                    this.$router.push({
                        name:'friendDetail',
                        query:{
                           friendId:friendId,
                        }
                    })
                    //this.$router.push({'path':'/friendDetail'+friendId})
                    //this.$router.push({'path':'/friendDetail'})
                },
                shareJump:function(){
                    this.$router.push({path:'/shareList'})
                },
                // 取消
                cancel:function(){
                    this.searchStatus=false;
                    this.searchCont='';
                    this.friendSearchList=[];
                    this.pStatus=false;
                    this.friendStatus=false;
                },
                //点击显示
                searchSwitch:function(){
                    this.searchStatus=true;
                },
                //搜索好友
                searchBtn:function(){

                    var me =this;
                    if (me.searchCont!='') {
                        getData2.searchBtn({method:'post',data:{"friendName":me.searchCont}},me.userInfo.usrId).then(function(rep){
                            me.pStatus=true;
           					console.log(rep)
                            if(rep.respCode=='00'){
                                me.friendSearchList=rep.content.friends;
                                if (rep.content.friends=='') {
                                    me.friendStatus=true;
                                }else{
                                    me.friendStatus=false;
                                }
                            }
                        });
                    }else{
                        me.friendSearchList=[];
                        me.pStatus=false;
                        me.friendStatus=false;
                    }

                },
                // 删除好友
                pass:function(id){
                    var me=this;
                    MessageBox({
                      title: '提示',
                      message: '确定删除该好友?',
                      showCancelButton: true
                    }).then(action => {
                        if(action=='confirm'){
                            getData2.deleteFriend({method:'post',data:{"friendId":id}},me.userInfo.usrId).then(function(rep){
                                if(rep.respCode=='00'){
                                    Toast({
                                        message: '删除成功',
                                        duration: 800
                                    });
                                    getData.myFriends({method:"post"},me.userInfo.usrId).then(function(rep){
                                        if(rep.respCode == '00'){
                                            me.friendList = rep.content.friends;
                                        }
                                    });
                                }else{
                                    Toast({
                                        message: '删除失败',
                                        duration: 800
                                    });
                                }
                            });
                        }else if(action=='cancel'){
                            console.log('取消');
                        }
                    });


                },
                searchFriend(){
                    this.$router.push({
                        name: 'searchFriend'
                    });
                }
            }
    }
</script>
<style scoped>
.searchIcon {
  font-size: 2rem
}
.friend_span_info{
    color:#999;
}
#friendSearchfixed{
    position:fixed;top:0;left:0;z-index:99;box-sizing:border-box;width:100%
}
/*.first-li{height:5.2rem;width:100%;}*/

/*.mint-cell .mint-cell-wrapper{*/
    /*display: block;*/
/*}*/
/*.mint-cell .mint-cell-wrapper .mint-cell-value{*/
    /*display: block;*/
/*}*/
</style>
